websoft-cms/pages/product/[id].vue

<template>
  <!-- Banner -->
  <Banner :data="form" />

  <div class="container flex flex-col w-full md:w-3/4 m-auto my-3">

    <Breadcrumb :data="form" :title="form?.categoryName || '文章列表'" />

    <!-- 左右结构 -->
    <div class="news-box sm:mt-0 mt-2 flex sm:flex-row flex-col justify-between sm:space-x-4">
      <div class="left sm:w-18/24">
        <!-- 文章列表 -->
        <div class="news-list">
          <ul class="infinite-list px-3" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
            <li v-for="item in list">
              <div class="item flex py-3 px-4 gap-xl mb-5 rounded-lg mb-3 bg-white hover:shadow">
                <div class="item-info py-2 flex flex-col justify-between">
                  <div class="title line-clamp-2 overflow-hidden text-ellipsis group-hover:group-hover:text-ellipsis">
                    <a :href="openSpmUrl(`/product/detail/${item.goodsId}`,item,item?.goodsId)" target="_blank" class="text-xl">{{ item.goodsName }}</a>
                  </div>
                  <div class="desc max-w-22/24 text-gray-5 sm:block hidden" v-html="item.comments"></div>
                  <div class="actions text-gray-4 text-sm flex gap-2xl">
                    <span href="#">{{ item.updateTime }}</span>
                    <span href="#">浏览：{{ item.actualViews }}</span>
                  </div>
                </div>
                <div class="item-image flex items-center" @click="navigateTo(`/goods/detail/${item.goodsId}`)">
                  <el-image :src="item.image" lazy class="sm:w-[140px] sm:h-[140px] w-[110px] h-[110px] bg-gray-50 cursor-pointer transition rounded-lg sm:rounded-lg ease-in-out delay-150  hover:-translate-y-1 hover:scale-110 duration-300" fit="contain" />
                </div>
              </div>
            </li>
          </ul>
          <div class="text-center text-gray-4">
            <text v-if="disabled">没有更多了</text>
            <text @click="load" v-else>加载更多</text>
          </div>
        </div>
      </div>
      <div class="right sm:mt-0 mt-4 sm:w-6/24">
        <!-- 推荐文章 -->
        <div class="category-item bg-white rounded-lg p-3 hover:shadow">
          <div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2">
            <el-icon>
              <ElIconLink/>
            </el-icon>
            <text class="ml-2">推荐文章</text>
          </div>
          <div class="flex flex-wrap px-2 py-4">
<!--            <div v-for="(item,index) in links" class="flex items-center">-->
<!--              <a :href="item.url" target="_blank">{{ item.name }}</a>-->
<!--              <el-divider v-if="index + 1 != links.length" direction="vertical" />-->
<!--            </div>-->
          </div>
        </div>

        <div class="category-item mt-4 bg-white rounded-lg p-3 hover:shadow">
          <div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2">
            <el-icon>
              <ElIconLink/>
            </el-icon>
            <text class="ml-2">点击排行</text>
          </div>
          <div class="flex flex-wrap px-2 py-4">
<!--            <div v-for="(item,index) in links" class="flex items-center">-->
<!--              <a :href="item.url" target="_blank">{{ item.name }}</a>-->
<!--              <el-divider v-if="index + 1 != links.length" direction="vertical" />-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>
  </div>
<!--  <el-divider />-->
<!--  <div v-if="!list">-->
<!--    <el-empty description="404 页面不存在"></el-empty>-->
<!--  </div>-->
</template>
<script setup lang="ts">
import type {ApiResult, PageResult} from "~/api";
import type {Article} from "~/api/cms/article/model";
import {useServerRequest} from "~/composables/useServerRequest";
import Breadcrumb from "~/components/Breadcrumb.vue";
import {useForm, useWebsite} from "~/composables/configState";
import type {Navigation} from "~/api/cms/navigation/model";
import {getIdBySpm, getPath, openSpmUrl} from "~/utils/common";
import type {Goods} from "~/api/shop/goods/model";

const route = useRoute();

// 页面信息
const list = ref<Goods[]>([]);
const title = ref();
const categoryName = ref();
const count = ref()
const page = ref<number>(1);
const disabled = ref<boolean>(false);
const newList = ref<Article[]>();

// 获取状态
const form = useForm();
const website = useWebsite();

const load = () => {
  if(!disabled.value){
    page.value++;
    // reload();
  }
}

// 请求数据
const reload = async () => {

  const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{query: {path: getPath()}})
  if(nav.value?.data){
    form.value = nav.value?.data;
  }

  useHead({
    title: `${form.value.title} - ${website.value.websiteName}`,
    meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }],
    bodyAttrs: {
      class: "page-container",
    },
    script: [
      {
        children: "console.log('Hello World')",
      },
    ],
  });

  // 获取文章分页
   useServerRequest<ApiResult<PageResult<Goods>>>('/shop/goods/page',{
    params: {
      page: page.value,
      categoryId: route.query.id
    }
  }).then(res => {
    const data = res.data.value?.data;
    count.value = data?.count;
    if (data?.list.length == 0) {
      disabled.value = true;
      return false;
    }
    if (page.value == 0) {
      list.value = data?.list;
    }else {
      list.value = list.value.concat(data?.list);
    }

    // list.value = articleList.value.data?.list;
    list.value.map((d,i)=>{
      if(i === 0){

      }
    });
  })

}


watch(
    () => route.path,
    (path) => {
      console.log(path,'=>Path')
      reload();
    },
    { immediate: true }
);

</script>